<template>
  <div class="cardList" ref="content" v-masonry transition-duration="0.25s" columnWidth=".infocard" item-selector=".infocard">
    <infoCard class="infocard" :isEdit="isEdit"  :id="item.card_id" :Info="item" v-masonry-tile v-for="(item) in list" 
      @click="toDetail(item.card_id,'pet')" @scroll="handleScroll"></infoCard>
  </div>
</template>

<script setup lang='ts'>
import { card } from '@/model';
import infoCard from './infoCard.vue';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { addhistory } from '@/api/index';
import { userStore } from '@/store';
const user = userStore();
const router = useRouter()

const toDetail =async (id:string,type:string) => {
  await addhistory({id,browser_type:type,viewer_id:user.userInfo.user_id,browser_id:id})
    router.push({
      path: '/detailInfo',
      query: {
        id:id,
        type:type
      }
    })
  }

defineProps({
  list: {
    type: Array<card>,
    default: []
  },
  isEdit: {
    type: Boolean,
    default: false
  }
})
const content=ref<HTMLElement | null>(null);

const handleScroll=()=>{

}
</script>

<style lang='less' scoped>
.cardList {
  width: 100%;
  padding-left: 0.8rem;
  box-sizing: border-box;
  padding-bottom: 3.375rem;
  margin-bottom: 5.375rem;
}
</style>
